<template>
  <div class="common-layout" >
    <el-container id="container" :style="windowHeight">
      <el-aside width="200px">
        <el-row class="tac">
          <el-col>
            <el-menu
              :unique-opened="true"
              :default-active="active"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="首页" @click="addTab('首页', 'Home')">
                <template #title>
                  首页
                </template>
              </el-menu-item>
              <el-sub-menu
                v-for="menu in menuList"
                :key="menu"
                :index="menu.id"
              >
                <template #title>
                  <i class="el-icon-location" />
                  <span> {{ menu.name }} </span>
                </template>
                <el-menu-item
                  v-for="mmenu in menu.submenu"
                  :key="mmenu"
                  :index="mmenu.id"
                  @click="addTab(mmenu.name, mmenu.comName)"
                >
                  <i class="el-icon-menu" />
                  <template #title>
                    {{ mmenu.name }}
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <h1 style="display:inline-block">学生管理系统</h1>
          <el-dropdown style="float: right;line-height: 60px;padding-right: 30px">
            <span class="el-dropdown-link">
              {{ username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="quit">退出</el-dropdown-item>  <!--divided-->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <TabMenu />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import axios from 'axios'
import { ref,watch } from "vue";
import TabMenu from "@/components/inc/TabMenu";
import { useStore } from 'vuex'
import router from "@/route";

export default {
  name: 'HomeMain',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    TabMenu
  },

  setup() {

    let windowHeight = ref("min-width: 1200px;min-height:" + (window.innerHeight-1).toString() + "px")
    const store = useStore()  // 该方法用于返回store 实例
    let menuList = ref([])
    let username = ref(localStorage.getItem("username"))
    const active = ref('首页')

    if (store.state.tabMenu.editableTabsValue != null) {
      active.value = store.state.tabMenu.editableTabsValue
    }

    menuList.value = [
      {
        id: "学生信息管理",
        name: "学生信息管理",
        submenu: [
          {
            id: "学生管理",
            name: "学生管理",
            comName: "StuSys",
            submenu: []
          },
          {
            id: "成绩管理",
            name: "成绩管理",
            comName: "ScoreSys",
            submenu: []
          }
        ]
      },
      {
        id: "教师信息管理",
        name: "教师信息管理",
        submenu: [
          {
            id: "教师管理",
            name: "教师管理",
            comName: "TeacherSys",
            submenu: []
          }
        ]
      },
      {
        id: "学生课程管理",
        name: "学生课程管理",
        submenu: [
          {
            id: "课程管理",
            name: "课程管理",
            comName: "CourseSys",
            submenu: []
          }
        ]
      },
      {
        id: "erveManager",
        name: "ServeManager",
        submenu: [
          {
            id: "monitor",
            name: "monitor",
            comName: "ServeSys",
            submenu: []
          }
        ]
      }
    ]

    const addTab = (targetName, cName) => {
      store.commit("tabMenu/addTab",
          {
            title: targetName,
            name: targetName,
            comName: cName,
          }
      )
    }

    const quit = () => {
      localStorage.removeItem("token")
      localStorage.removeItem("username")
      router.push("/login")
    }

    watch(() => store.state.tabMenu.editableTabsValue, (newValue, oldValue) => {
      active.value = newValue
    },{deep: true})

    window.onresize = () => {
      windowHeight.value = "min-width: 1200px;min-height:" + (window.innerHeight-1).toString() + "px"
    };

    return {
      menuList,
      username,
      windowHeight,
      active,
      quit,
      addTab
    }
  }
}
</script>

<style scoped>
#Stu {
  min-height: 562px;
  height: 562px;
}
.el-container{
  min-width: 1200px;
}
.el-header {
  background-color: #38d4da;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #545c64;
}
.el-main {
  padding-bottom: 0;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
